<template>
  <div class="password-form-main">
    <div v-loading="loading" element-loading-text="修改中">
      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="120px">
        <el-form-item label="原密码：" prop="oldPassword">
          <el-input type="password" style="display:none" />
          <el-input
            v-model.trim="form.oldPassword"
            placeholder="请输入"
            maxlength="12"
            show-word-limit
            autocomplete="new-password"
          />
        </el-form-item>
        <el-form-item label="新密码：" prop="newPassword">
          <el-input type="newPassword" style="display:none" />
          <el-input
            v-model.trim="form.newPassword"
            placeholder="请输入新密码"
            type="password"
            show-password
            autocomplete="new-password"
          />
        </el-form-item>
        <el-form-item label="确认新密码：" prop="checkPass">
          <el-input type="password" style="display:none" />
          <el-input
            v-model.trim="form.checkPass"
            placeholder="请再次输入新密码"
            type="password"
            show-password
            autocomplete="new-password"
          />
        </el-form-item>
        <el-form-item>
          <el-button size="small" round type="primary" @click="submitForm">确定修改</el-button>
        </el-form-item>
      </el-form>
    </div>

  </div>
</template>

<script>
// import { validEngNum } from '@/utils/validate'
import { modifyPw } from '@/api/user/auth'

export default {
  data() {
    const reg = /^[a-z0-9A-Z!"#$%&'()*+,.\/:;<=>?@\[\]^_`{|}〜-]*$/i
    // 表单校验方法相关
    const validateOldPassword = (rule, value, callback) => {
      if (this.$isNull(value)) {
        callback(new Error('请输入原密码'))
      } else if (!reg.test(value)) {
        callback(new Error('密码含有非法字符'))
      } else if (value.length < 6 || value.length > 12) {
        callback(new Error('长度为6~12个字符'))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (this.$isNull(value)) {
        callback(new Error('请输入密码'))
      } else if (!reg.test(value)) {
        callback(new Error('密码含有非法字符'))
      } else if (value.length < 6 || value.length > 12) {
        callback(new Error('长度为6~12个字符'))
      } else if (!this.$isNull(this.form.checkPass)) {
        this.$refs.form.validateField('checkPass')
        callback()
      } else {
        callback()
      }
    }
    const validatePassword2 = (rule, value, callback) => {
      if (this.$isNull(value)) {
        callback(new Error('请再次输入新密码'))
      } else if (value !== this.form.newPassword) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      // 配置
      // 校验字段相关
      rules: {
        oldPassword: [{ required: true, validator: validateOldPassword, trigger: ['blur', 'change'] }],
        newPassword: [{ required: true, validator: validatePassword, trigger: ['blur', 'change'] }],
        checkPass: [{ required: true, validator: validatePassword2, trigger: ['blur', 'change'] }]
      },
      // 状态
      loading: false,
      // 数据
      form: {
        oldPassword: null,
        newPassword: null,
        checkPass: null
      }
    }
  },
  computed: {},
  watch: {},
  beforeCreate() {
  },
  created() {
  },
  beforeMount() {
  },
  mounted() {
  },
  beforeUpdate() {
  },
  update() {
  },
  activated() {
  },
  deactivated() {
  },
  beforeDestroy() {
  },
  destroyed() {
  },
  methods: {
    /**
     * 数据组
     */
    /**
     * 按钮组
     */
    // 修改密码
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.loading = true
          const params = Object.assign({}, this.form)
          modifyPw({ data: params })
            .then(() => {
              this.$alert('密码修改成功，请使用新密码重新登录！', '提示', {
                confirmButtonText: '确定',
                center: true,
                roundButton: true,
                type: 'success',
                callback: action => {
                  this.$store.dispatch('user/FedLogOut').then(() => {
                    location.reload()
                  })
                }
              })
            }).finally(() => {
              this.loading = false
            })
        } else {
          return false
        }
      })
    }
    /**
     * 状态组
     */
    /**
     * 方法组
     */
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.password-form-main{
  padding-top: 10px;
  .el-input {
    width: 400px;
  }
}
</style>
